<template>
  <div class="dashboard-editor-container">
    <link
      href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1"
      rel="stylesheet"
      type="text/css"
    />
    <!--基础信息-->
    <div class="info">
      <!--信息-->
      <div style="width: 70%">
        <!--信息-->
        <div class="info-wrap">
          <div class="img">
            <userAvatar :user="user" style="margin-left: -20px" />
           
          </div>
          <div class="info-detail" style="width: 30%">
            <div style="margin-top: 10px">
              <!-- {{ userData.userName }} -->
              <img
                src="@/assets/img/edit.svg"
                style="
                  width: 10px;
                  height: 10px;
                  margin-left: 5px;
                  margin-right: 25px;
                "
              />
              <img
                src="@/assets/img/sex.svg"
                style="width: 15px; height: 15px"
              />
            </div>
            <div
              style="display: flex; align-items: center; margin-bottom: 10px"
            >
              <img
                src="@/assets/img/phone.svg"
                style="width: 15px; height: 15px"
              />
              <!-- {{ userData.phonenumber }} -->
            </div>
          </div>
          <div class="info-detail" style="width: 55%">
            <div style="margin-top: 10px; display: flex">
              <div style="margin-right: 100px">用户邮箱：</div>
              <div>欢迎来到润客后台！</div>
            </div>
            <div style="margin-bottom: 10px; display: flex">
              <!-- <div style="margin-right: 124px">所属角色：{{ roleData }}</div>
              <div>创建时间：{{ userData.createTime }}</div> -->
            </div>
          </div>
        </div>
        <!--按钮-->
        <div
          style="
            display: flex;
            color: #3875f6;
            font-size: 18px;
            text-align: center;
            margin-left: 95px;
            margin-top: 50px;
          "
        >
          <div
            style="
              background: #dfebff;
              width: 80px;
              border-radius: 30px;
              height: 40px;
              line-height: 40px;
              margin-right: 20px;
              box-shadow: 0 0 40px #3a66f1;
            "
          >
            编辑
          </div>
          <div
            style="
              background: #dfebff;
              width: 100px;
              border-radius: 30px;
              height: 40px;
              line-height: 40px;
              box-shadow: 0 0 40px #3a66f1;
            "
          >
            邀请码
          </div>
        </div>
      </div>
      <!--二维码-->
      <div style="">
        <vue-qr v-show="qrcode" :text="qrcode" :margin="7" :size="70"></vue-qr>
        <div
          style="
            margin-top: 60px;
            width: 70px;
            text-align: center;
            font-size: 20px;
            color: white;
          "
        >
          <!-- {{ Invitation }} -->
        </div>
      </div>
    </div>
    <!--数据-->
     
    <div class="content">
      <div class="data">
        <div class="data-card">
          <div class="card" style="margin-right: 20px">
            <div class="title">资金概述</div>
            <div
              style="
                height: 280px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
              "
            >
              <div style="margin-top: -60px">
                <div
                  style="color: #666666; font-size: 20px"
                  v-if="roleData == '用户'"
                >
                  总收入
                </div>
             
                <div style="color: #666666; font-size: 20px" v-else>总支出</div>
                <div
                  @mouseenter="swing = true"
                  @mouseleave="swing = false"
                  class="animate__animated animate__swing"
                  :class="{ animate__infinite: swing }"
                  style="
                    color: #3875f6;
                    cursor: pointer;
                    font-size: 33px;
                    margin-top: 20px;
                  "
                >
                  <!-- {{ CardData.totalExpend || 0 }}元 -->
                </div>
              </div>
            </div>
            <div style="display: flex; margin-top: -35px">
              <div class="money" style="border-right: 1px solid #eeeeee">
                <div class="label" v-if="roleData == '用户'">
                  佣金收入
                  <img src="@/assets/img/money.png" />
                </div>
                <div class="label" v-else>
                  佣金支出
                  <img src="@/assets/img/money.png" />
                </div>
                <!-- <div class="value">{{ CardData.totalCommission||0 }}元</div> -->
              </div>
              <div class="money">
                <div class="label" v-if="roleData == '用户'">
                  分成收入
                  <img src="@/assets/img/fencheng.svg" />
                </div>
                <div class="label" v-else>
                  分成支出
                  <img src="@/assets/img/fencheng.svg" />
                </div>
                <!-- <div class="value">{{ CardData.totalProfit||0 }}元</div> -->
              </div>
            </div>
          </div>
          <div class="card">
            <div class="title">团队</div>
            <div class="team">
              <div
                class="team-item"
                style="padding-bottom: 20px; margin-right: -20px"
              >
                <!-- <div class="value">{{ pageData.teamSum }}人</div> -->
                <div class="label">总人数</div>
              </div>
              <div class="team-line"></div>
              <div
                class="team-item"
                style="padding-top: 20px; margin-left: -20px"
              >
                <div class="value">2个</div>
                <div class="label">团队</div>
              </div>
            </div>
            <div style="margin-top:-25px">
               <div class="team-lian">
              <!-- <div class="value">{{ pageData.StraightTeam||0 }}人</div> -->
              <div class="label">直联团队</div>
            </div>

            <div class="team-lian">
              <!-- <div class="value">{{ pageData.BetweenTeam||0 }}人</div> -->
              <div class="label">间联团队</div>
            </div>
            </div>
           
          </div>
        </div>


        <div class="data-line" ref="dataLine">
          <div class="title">数据</div>
          <div style="margin-top: 30px">
            <div style="display: flex; justify-content: space-between">
              <div>2020年度汇总图表一览：</div>
              <div>单位：单</div>
            </div>
             <!-- <div ref="chart" style="width: 100%; height: 340px;margin-top: -30px;"/> -->
       
            <div id="main" style="width: 600px;height:400px;"></div>
            <!-- <img src="@/assets/img/tbBox.png" alt="" style="height: 260px" /> -->
          </div>
        </div>
      </div>
      <div class="notice">
        <div class="title" style="padding: 0px 25px">公告</div>
        <div style="overflow-y: auto; height: 100%; padding: 0px 25px">
          <el-timeline style="margin: 20px 0 0 40px">
            <el-timeline-item v-for="(item, index) in activities" :key="index">
              <template v-if="item.img">
                <div
                  slot="dot"
                  style="
                    height: 70px;
                    width: 70px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                    overflow: hidden;
                    border-radius: 50%;
                     border: 4px solid #d6e8fe;
                     left: -30px;
                  "
                >
                  <!-- <div
                  slot="dot"
                  style="
                    overflow: hidden;
                    border-radius: 50%;
                    border: 4px solid #d6e8fe;
                    position: relative;
                    left: -30px;
                    background: white;
                  "
                > -->
                  <!-- <img :src="item.img" style="width: 60px;height: 60px;"/> -->
                 
                      <userAvatar
                        :user="user"
                        style="width: 60px; height: 60px;margin-left:-100%;margin-top:-30px"
                      />
                      <!-- <img :src="require(''+userInfo.img)" style="width: 70px;height: 70px"> -->
                 
                  <!-- <userAvatar :user="user" style="width: 60px;height: 60px;margin-left:-15px"/> -->
                </div>
                <div style="height: 70px"></div>
              </template>
              <template v-else-if="item.date">
                <div
                  slot="dot"
                  style="
                    width: 60px;
                    height: 60px;
                    line-height: 60px;
                    background: rgb(99, 111, 236);
                    color: white;
                    border-radius: 50%;
                    text-align: center;
                    position: absolute;
                    top: -10px;
                    left: -24px;
                  "
                >
                  {{ item.date }}
                </div>
                <div style="height: 60px"></div>
              </template>
              <template v-else>
                <div
                  slot="dot"
                  :class="item.type"
                  style="
                    border-radius: 50%;
                    padding: 4px;
                    position: relative;
                    left: -2px;
                    background: white;
                  "
                ></div>
                <div>
                  <!-- 时间戳 -->
                  <div
                    style="
                      position: absolute;
                      left: -90px;
                      width: 80px;
                      text-align: right;
                      color: #666;
                    "
                  >
                    {{ item.timestamp }}
                  </div>
                  <!-- 标签 -->
                  <div style="margin-bottom: 10px; color: black">
                    <span>{{ item.title }}</span>
                    <span v-if="item.tags && item.tags.length > 0">
                      <span
                        v-for="(tag, i) in item.tags"
                        :key="i"
                        :class="'tag-' + tag.type"
                        style="
                          color: white;
                          width: 60px;
                          display: inline-block;
                          border-radius: 20px;
                          text-align: center;
                          padding: 4px;
                        "
                      >
                        {{ tag.content }}
                      </span>
                    </span>
                  </div>
                  <div
                    style="
                      padding: 10px;
                      background: rgb(247, 247, 247);
                      color: #838383;
                      border-radius: 4px;
                    "
                  >
                    {{ item.content }}
                  </div>
                </div>
              </template>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "animate.css";
import {
  getSetup,
  selectByInvitationCodeIsUserId,
} from "@/api/system/index";
import { getInfo, getIdentityAndTopId } from "@/api/login.js";
import VueQr from "vue-qr";
import { getUserProfile } from "@/api/system/user";
import userAvatar from "./system/user/profile/userAvatar";
import { selectByTeamSum } from "@/api/base/index.js";
import { capUserWalletRecordStatistics } from "@/api/finance/index.js";


export default {
  data() {
    return {
      // 左卡片
      CardData: {},
      //所属角色
      roleData: "",
      //二维码
      Invitation: "",
      //二维码链接
      qrcode: "",
      moneyList: [
        {
          name: "佣金收入",
          // icon: require("@/assets/images/money.png"),
          price: "533.54",
        },
        {
          name: "分成收入",
          // icon: require("@/assets/images/divide.png"),
          price: "80000.00",
        },
      ],
      userData: null,
      userId: "",
      // 页面信息
      pageData: {},
      swing: false,
      chart: null,
      userInfo: {
        img: "./img/header.jpg",
        name: "爱吃鱼的小猫",
        phone: "15735835669",
        email: "ry@163.com",
        role: "普通用户",
        createTime: "2021-01-22 07:27:43",
      },
      activities: [
        {
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201712%2F15%2F20171215221023_KiYWM.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639574514&t=061edfc2475a852df49b797e85d3b6ae",
        },
        {
          timestamp: "一小时前",
          title: "人员变更",
          type: "primary",
          content:
            "百度公司推出的一部内容开放、自由的网络百科全书。其测试版于2006年4月20日上线",
        },
        {
          timestamp: "2018-04-12 20:46",
          title: "变更",
          type: "warning",
          content:
            "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
        },
        {
          timestamp: "2018-04-12 20:46",
          title: "再次变更",
          type: "danger",
          content:
            "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
          tags: [
            {
              type: "warning",
              content: "提示",
            },
            {
              type: "danger",
              content: "严重",
            },
          ],
        },
        {
          timestamp: "2018-04-12 20:46",
          title: "信息",
          type: "success",
          tags: [
            {
              type: "primary",
              content: "查看",
            },
          ],
          content:
            "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
        },
        {
          date: "2020",
        },
        {
          timestamp: "2018-04-12 20:46",
          title: "人员变更",
          type: "primary",
          content:
            "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
        },
        {
          timestamp: "2018-04-12 20:46",
          title: "人员变更",
          type: "primary",
          content:
            "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
        },
        {
          timestamp: "2018-04-12 20:46",
          title: "人员变更",
          type: "primary",
          content:
            "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
        },
        {
          timestamp: "2018-04-12 20:46",
          title: "人员变更",
          type: "primary",
          content:
            "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
        },
        {
          timestamp: "2018-04-12 20:46",
          title: "人员变更",
          type: "primary",
          content:
            "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
        },
        {
          timestamp: "2018-04-12 20:46",
          title: "人员变更",
          type: "primary",
          content:
            "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
        },
        {
          timestamp: "2018-04-12 20:46",
          title: "人员变更",
          type: "primary",
          content:
            "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
        },
        {
          timestamp: "2018-04-12 20:46",
          title: "人员变更",
          type: "primary",
          content:
            "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
        },
      ],
      dataLine: [],
      // money: {
      //   total: "888,533.54",
      //   commission: "533.54",
      //   divide: "800,00.00",
      // },
      // team: {
      //   total: 613,
      //   teamNum: 2,
      //   zhilian: 533,
      //   jianlian: 80,
      // },
    };
  },
  components: { VueQr, userAvatar },
   async created() {
    // 获取用户ID
    const res = await getInfo();
    sessionStorage.userID = res.user.userId;
    this.userId = res.user.userId;
  
    // this.start();
  },
  mounted() {
    // 初始化图表
      //  this.nodetest();
    this.start();
    //获取团队收入信息
    this.test();
 
  
  },
  methods: {
      nodetest() {
       
           // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    async start() {
      //获取是租户还是用户还是平台
      const { data } = await getIdentityAndTopId();
      //console.log(data.identity, "用户信息平台还是租户");
      this.roleData = data.identity;
      sessionStorage.userName = data.identity;

      //获取邀请码
      const yqm = await selectByInvitationCodeIsUserId();
      //console.log(yqm, "获取邀请码");
      this.Invitation = yqm.msg;
      // this.qrcode = `http://192.168.31.130/login?redirect=%2Findex&yqm=${yqm.msg}&judge=2`;
      this.qrcode = `http://laxin.91weiduan.cn/login?redirect=%2Findex&yqm=${yqm.msg}&judge=2`;
      if (data.identity == "租户") {
        const pz = await getSetup();
        //console.log(pz, "获取基础设置");
        //保存到临时存储本地
        sessionStorage.setupParam = JSON.stringify(pz.data);
      }

      //获取用户个人信息
      const userParma = await getUserProfile();
      //console.log(userParma.data, "用户信息");
      this.userData = userParma.data;
    },
    async test() {
      // 右卡片
      const { data } = await selectByTeamSum({ userId: this.userId });
      // //console.log(data, "卡片");
      this.pageData = data;
      // 左卡片
      //console.log(this.userId, "卡片");
      const card = await capUserWalletRecordStatistics({ userId: this.userId });
      this.CardData = card;
      //console.log(card, "卡片");

      // 获取卡片

      //  佣金支出     totalCommission: 0
      // totalExpend: 0 总支出
      // totalIncome: null
      // totalOther: 0 totalOther
      // totalProfit: 0 分润支出

      // this.cardData[0].num1 = data.teamSum;
      // this.cardData[1].num1 = data.StraightTeam;
      // this.cardData[2].num1 = data.BetweenTeam;
    },
    
  },
 
};
</script>
<style lang="scss">
.el-timeline {
  .el-timeline-item {
    .el-timeline-item__tail {
      border-left: 1px solid #d4d4d5;
    }
  }
}
</style>
<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .info {
    height: 200px;
    background: #6d90fb;
    border-radius: 5px;
    padding: 20px 30px;
    display: flex;

    .info-wrap {
      height: 70px;
      display: flex;

      .img {
        height: 70px;
        width: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        border-radius: 50%;
        border: 4px solid white;
        box-shadow: 0 0 40px #3a66f1;
      }

      .info-detail {
        height: 100%;
        border-right: 1px solid #ffffff;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 30px;
      }
    }
  }

  .content {
    height: 800px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;

    .title {
      font-weight: 500;
      font-size: 20px;
    }

    .data {
      height: 100%;
      width: 60%;

      .data-card {
        height: 400px;
        display: flex;
        /*justify-content: space-between;*/

        .card {
          height: 100%;
          /*width: 486px;*/
          width: 50%;
          background: white;
          border-radius: 5px;
          padding: 20px 25px;

          .money {
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .label {
              color: #999999;
              font-size: 16px;
              margin-bottom: 10px;
              display: flex;
              justify-content: center;
              align-items: center;

              img {
                width: 14px;
                height: 14px;
                margin-left: 8px;
              }
            }

            .value {
              font-size: 23px;
            }
          }

          .team {
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;

            .team-item {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            }

            .label {
              color: #666666;
              margin-top: 10px;
            }

            .value {
              color: #3875f6;
              font-size: 26px;
            }

            .team-line {
              width: 120px;
              height: 4px;
              border-bottom: 2px solid #3676f7;
              text-align: center;
              -webkit-transform: rotate(135deg);
              -moz-transform: rotate(135deg);
              filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=0.45);
            }
          }

          .team-lian {
            background: #f7f8fa;
            height: 60px;
            margin-bottom: 15px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .value {
              color: #457ef6;
              font-size: 20px;
            }

            .label {
              color: #b1b2b2;
              font-size: 14px;
              margin-top: 5px;
            }
          }
        }
      }

      .data-line {
        margin-top: 20px;
        height: 380px;
        background: white;
        border-radius: 5px;
        padding: 20px 25px;
      }
    }

    .notice {
      height: 100%;
      width: 38.7%;
      border-radius: 5px;
      background: white;
      padding: 20px 0;
    }
  }
}

.tag-primary {
  background: rgb(83, 138, 255);
  box-shadow: 0 0 10px rgba(83, 138, 255, 0.8);
  margin-left: 10px;
}

.tag-danger {
  background: rgb(253, 102, 102);
  box-shadow: 0 0 10px rgba(253, 102, 102, 0.8);
  margin-left: 10px;
}

.tag-warning {
  background: rgb(250, 178, 68);
  box-shadow: 0 0 10px rgba(250, 178, 68, 0.8);
  margin-left: 10px;
}

.primary {
  border: 3px solid rgb(83, 138, 255);
}

.danger {
  border: 3px solid rgb(253, 102, 102);
}

.warning {
  border: 3px solid rgb(250, 178, 68);
}

.success {
  border: 3px solid rgb(32, 226, 184);
}
</style>
